<template>

<div class="comp-person1">
    <Header title="完善个人信息"></Header>
    <mu-container class="">
        <mu-form :model="form" class="mu-demo-form" :label-position="'left'" label-width="100">
            <mu-form-item prop="input" label="手机号">
                <mu-text-field v-model="form.phone"></mu-text-field>
            </mu-form-item>
            <mu-form-item prop="input" label="真实姓名">
                <mu-text-field v-model="form.username"></mu-text-field>
            </mu-form-item>
            <mu-form-item prop="input" label="身份证号">
                <mu-text-field v-model="form.cardnum"></mu-text-field>
            </mu-form-item>
            <mu-form-item prop="sex" label="性别">
                <mu-radio v-model="form.sex" value="男" label="男士"></mu-radio>
                <mu-radio v-model="form.sex" value="女" label="女士"></mu-radio>
                <hr class=" mu-divider">
            </mu-form-item>
            <mu-form-item prop="input" label="年龄">
                <mu-text-field v-model="form.age"></mu-text-field>
            </mu-form-item>
            <mu-form-item prop="input" label="微信号">
                <mu-text-field v-model="form.wx_count"></mu-text-field>
            </mu-form-item>
            
            <mu-form-item class="last-btn" prop="" label="" >
                <mu-button class="btn_next" @click="submit">下一步</mu-button>
            </mu-form-item>

            
        </mu-form>
    </mu-container>
</div>
</template>


<script>
import Header from '../../../components/Header'

export default {
    components : { Header },

    data () {
        return {
            labelPosition: 'left',
            form: {
                username: '',
                cardnum: '',
                phone: '',
                sex: '男',
                age: 0,
                wx_count: ''
            }
        }
    },
    created() {
        // 发送获取用户信息请求
        this.$http({
            url: '/api/user/getMyselfInfo',
            method: 'POST',
            headers: {
                phone: localStorage.getItem('phone'),
                token: localStorage.getItem('token')
            }
        })
        // 请求数据成功后更新
        .then(({ data }) => {
            this.update(data.data);
        })
    },
    methods: {
        // 更新方法
        update(data) {
            this.form.phone = data.phone;
            this.form.cardnum = data.cardnum;
            this.form.username = data.username;
            this.form.sex = data.sex;
            this.form.age = data.age;
            this.form.wx_count = data.wx_count;
        },
        submit() {
            // this.$http({
            //     url: '/api/user/saveMyProfileStep1',
            //     method: 'POST',
            //     data: {
            //         username: this.form.username,
            //         cardnum: this.form.cardnum,
            //         sex: this.form.sex,
            //         age: this.form.age,
            //         wx_count: this.form.wx_count
            //     }
            // })
            // .then(({ data }) => {
            //     console.log(data);
            // })
            this.$router.replace('/person2');
        }
    }
}
</script>

<style lang="scss">
.comp-person1 {
    .mu-demo-form {
        width: 100%;
        max-width: 460px;
        padding: 12px;
        margin: 0 auto;
        .mu-form-item {
            margin-bottom: 0;
        }
        .last-btn {
            margin-top: 20px;
            .btn_next {
                background-color: #2196f3;
                color: #fff;
            }
            
        }
    }
}

</style>